<template>
	<div :style="styles">
		<mt-swipe :auto="4000">
			<mt-swipe-item>
				<img src="https://sta-op.douyucdn.cn/douyu-vrp-admin/2019/01/07/d7c362a286f08c282281a505dd7ffaa4.jpg">
			</mt-swipe-item>
			<mt-swipe-item>
				<img src="https://sta-op.douyucdn.cn/douyu-vrp-admin/2019/01/07/e02c563e42a695db19985aeb5ce56c52.jpg">
			</mt-swipe-item>
			<mt-swipe-item>
				<img src="https://sta-op.douyucdn.cn/douyu-vrp-admin/2019/01/07/39b7ab650f7a6bd580192704045d6664.jpg">
			</mt-swipe-item>
		</mt-swipe>
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			styles: {
				type: Object,
				default: () => ({})
			}
		},
		created() {
		}
	}
</script>

<style scoped="scoped" lang="less">
	@fixed: 1.02rem;

	.mint-swipe {
		width: 100%;
		height: 52.8vw;
		
		.mint-swipe-item {
			text-align: center;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.mint-swipe-indicator {
		opacity: 1 !important;
	}

	.is-active {
		background: black !important;
	}
</style>
